<template>
  <div class="">
    <div
      class="container"
      style="display: flex;flex-direction: column;width: 100%;"
    >
      <div style="display: flex;flex-direction: column;padding-top: 10px;">
        <div
          style="display: flex;justify-content: space-between;padding-bottom:10px;"
          class="block"
        >
 
          <el-card style="width: 100%;">
            <div
              style="display: flex;justify-content: space-between;flex-direction: row;"
              class="block"
            >
            <div  style="flex:2;display: flex;justify-content: flex-end;">
                 <el-input style="flex: 1;"
                    v-model="select_action"
                    placeholder="请求路径"
                  />
                   <el-input style="flex: 1;"
                     v-model="select_name"
                     placeholder="功能名"
                   />
                  <div style="flex: 1;" >
                              
                      <el-select
                        v-model="select_access"
                        placeholder="标识"
                      >
                        <el-option
                          :key="key"
                          v-for="(item,key) in select_accesslist"
                          :label="item"
                          :value="key"
                        />
                      </el-select>
                   
                  </div>
                  <div style="flex: 1;">
                    <el-button
                        type="primary"
                        @click="getData"
                      >
                        获取数据
                    </el-button>
                  </div>
            </div>

              <div style="flex:1;display: flex;justify-content: flex-end;">
                <el-button
                  v-if="!isTrashed"
                  type="primary"
                  style="align-self: flex-end;"
                  icon="el-icon-circle-plus-outline"
                  @click="handleEdit('add')"
                >
                  添加新功能
                </el-button>
                <el-button
                  v-if="isTrashed"
                  type="info"
                  icon="el-icon-arrow-left"
                  @click="trashed(0)"
                >
                  切回
                </el-button>
                <el-button
                  v-else
                  type="info"
                  class="iconfont icon-lajigarbage7"
                  style="font-size: 0.9em;"
                  @click="trashed(1)"
                >
                  回收站
                </el-button>
              </div>
            </div>
          </el-card>
        </div>

        <template>
          <el-table
            :data="userData"
            stripe
            type="index"
            border
            class="table"
            ref="multipleTable"
            max-height="700"
            style="width: 100%;"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form
                  label-position="left"
                  inline
                  class="demo-table-expand"
                  label-width="250px"
                >
                  <el-form-item label="功能名称">
                    <span v-html="props.row.func_name?props.row.func_name:'未定义'" />
                  </el-form-item>
                  <el-form-item label="请求方法">
                    <span v-html="props.row.method?props.row.method:'未定义'" />
                  </el-form-item>
                  <el-form-item label="功能 ID">
                    <span>{{ props.row.id }}</span>
                  </el-form-item>
                  <el-form-item label="请求路径(控制器/方法)">
                    <span v-html="props.row.action?props.row.action:'未定义'" />
                  </el-form-item>
                  <el-form-item label="入口标识">
                    <span v-html="props.row.access?props.row.access:'未定义'" />
                  </el-form-item>
                  <el-form-item label="接入数据格式">
                    <span>{{ props.row.access }}</span>
                  </el-form-item>
                  <el-form-item label="返回数据格式">
                    <span>{{ props.row.recaption }}</span>
                  </el-form-item>
                  <el-form-item label="过滤的请求的字段">
                    <span>{{ props.row.ban_param }}</span>
                  </el-form-item>
                  <el-form-item label="仅放行请求字段">
                    <span>{{ props.row.only_param }}</span>
                  </el-form-item>
                  <el-form-item label="功能说明">
                    <span>{{ props.row.explain }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
                        
            <el-table-column
              prop="id"
              label="ID"
              min-width="40"
            />

            <el-table-column
              prop="func_name"
              label="功能名称"
              min-width="100"
            >
              <template slot-scope="scope">
                <div>
                  <span v-html="scope.row.func_name?scope.row.func_name:'未定义'" />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="methods"
              label="请求方法"
              min-width="60"
            >
              <template slot-scope="scope">
                <div>
                  <span v-html="scope.row.method?scope.row.method:'未定义'" />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="action"
              label="请求路径(控制器/方法名)"
              min-width="100"
            >
              <template slot-scope="scope">
                <div>
                  <span v-html="scope.row.action?scope.row.action:'未定义'" />
                </div>
              </template>
            </el-table-column>
            
             <el-table-column
              prop="access"
              label="入口标识"
               width="100"
            >
            <template slot-scope="scope">
              <div >
                <span v-html="scope.row.access?scope.row.access:'未定义'" />
              </div>
             </template>
             </el-table-column>
            <el-table-column
              prop="create_time"
              label="创建日期"
              data-key="create_time"
              :formatter="formatDate"
              sortable
              width="100"
            />
            <el-table-column
              prop="update_time"
              label="更新日期"
              data-key="update_time"
              :formatter="formatDate"
              sortable
              width="100"
            />
            <el-table-column
              fixed="right"
              label="编辑"
              width="150"
            >
              <template slot-scope="scope">
                <div v-if="!isTrashed">
                  <el-button
                    type="text"
                    size="small"
                    icon="el-icon-delete"
                    style="color:red"
                    @click="handleDelete('del', scope.row,false)"
                  >
                    删除
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    icon="el-icon-edit"
                    @click="handleEdit('edit', scope.row)"
                  >
                    编辑
                  </el-button>
                </div>
                <div v-else>
                  <el-button
                    type="text"
                    plain
                    size="small"
                    icon="el-icon-refresh"
                    @click="handleDelete('restore', scope.row)"
                  >
                    恢复
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    icon="el-icon-delete"
                    style="color:red"
                    @click="handleDelete('del', scope.row,true)"
                  >
                    彻底删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div
            class="pagination"
            style=""
          >
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :page-size="10"
              layout="prev, pager, next"
              :total="tableData.length"
            />
          </div>
        </template>
      </div>
    </div>

    <!-- 公共form表单弹出框 -->
    <el-dialog
      :title="action=='add'?'添加功能接口':'修改功能接口'"
      :visible.sync="editVisible"
      width="40%"
    >
      <div
        class="form-box"
        style="align-self: center;"
      >
        <el-form
          ref="form"
          :model="form"
          label-width="160px"
        >
          <el-form-item
            v-if="action!='add'"
            label="ID"
          >
            <el-input
              disabled
              :value="form.id"
            />
          </el-form-item>
          <el-form-item
            label="功能名"
            prop="func_name"
          >
            <el-input
              placeholder="例如:添加新功能"
              v-model="form.func_name"
            />
          </el-form-item>
          <el-form-item
            label="访问地址不含域名"
            prop="action"
          >
            <el-input
              placeholder="例:www.qq.com/后边的部分->weixin/login"
              v-model="form.action"
            />
          </el-form-item>
          <el-form-item
            label="请求方法"
            prop="method"
          >
            <el-input
              placeholder="默认为不限制,可填:POST/GET/PUT/DELETE等"
              v-model="form.method"
            />
          </el-form-item>
          <el-form-item label="仅支持的请求参数key">
            <el-input
              placeholder="默认为不限制,多个参数用逗号分割,例:id,name,password"
              v-model="form.only_param"
            />
          </el-form-item>
          <el-form-item label="禁止的请求参数key">
            <el-input
              placeholder="默认为不限制,多个参数用逗号分割,例:user_id,auth,password"
              v-model="form.ban_param"
            />
          </el-form-item>
          <el-form-item
            label="功能介绍"
            prop="explain"
          >
            <el-input
              placeholder="可以是功能说明,也可用是功能操作方法"
              v-model="form.explain"
            />
          </el-form-item>
          <el-form-item
            label="接口接入规范"
            prop="note"
          >
            <el-input
              placeholder="访问接口需要携带哪些参数,例:id=1&p=1"
              v-model="form.note"
            />
          </el-form-item>
           <el-form-item
            label="入口标识"
            prop="access"
          >
            <el-input
              placeholder="如后台:入口文件index.php,仅需填写index"
              v-model="form.access"
            />
          </el-form-item>
          <el-form-item
            label="接口返回数据范本"
            prop="recaption"
          >
            <el-input
              placeholder="例:{message:'ok',code:200}"
              v-model="form.recaption"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit('form')"
            >
              提交
            </el-button>
            <el-button @click="editVisible=false">
              取消
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import yc from "yc-js";
   var Time=yc.Time;
   import Request from "../../request/index.js"
    export default {
        name: 'AdminList',
        data() {
            return {
                action: 'add',
                page:1,//页码
                num:10,//每页数量
                pageNum:10,//看过的数量
                tableData: [],
                isTrashed: 0,
                editVisible: false, //编辑
                formEdit: { //编辑修改表单
                    rank_name: '',
                },
                form: {
                    func_name: '',
                    mote:'',
                    action: '',
                    method: '',
                    explain: '',
                    access: '',
                    recaption: '',
                    ban_param: '',
                    only_param: ''
                },
                select_access:null,
                select_action:null,
                select_name:null,
                select_accesslist:{
                  system:'系统管理',
                  admin:'后台管理'
                }
            }
        },
        created() {
            this.getData();
        },
        watch:{
           isTrashed(e){
               this.page=1;
           },select_access(e){
              // this.getData();
           },select_action(){
             this.search()
           },select_name(){
             this.search()
           }
        },
        computed: {
            userData: {
                get() {
                   var page= (this.page-1)*this.num;
                   var max=page+this.num;
                   var i=-1;
                    return  this.tableData.filter(e=>{
                         i++;
                        if (i >=page && i <max) {
                        	return e
                        } 
                    });
                }
            }
        },
        methods: {
            search(){
              var tableData=this.AllData;
              this.page=1;
              var num=0;
              var data=tableData.filter(e=>{
                if( (!this.select_access || (e.access.indexOf(this.select_access)!=-1)) && (!this.select_action || (e.action.indexOf(this.select_action)!=-1)) && (!this.select_name || (e.func_name.indexOf(this.select_name)!=-1))){
                  num ++;
                  return e
                }
              });
              this.tableData=data;
              
            },
            handleCurrentChange(e){
                this.page=e; 
            },
            trashed(e) {
                this.isTrashed = e;
                this.getData();
            },
            formatDate(row, column, val, index) {
                // 时间转换
                if (val) {
                    return Time.formatDate(val, 'yyyy-MM-dd')
                }
                return val;
            },
            // 向服务器发送请求获取 数据
            getData() {
                var isTrashed = this.isTrashed;
                Request.get('AdminFunc_DetailedList', {
                        params: {
                            trashed: isTrashed,
                            access:this.select_access
                        }
                    })
                    .then((res) => {
                        if (res.data.code != 200) {
                            this.$notify({
                                title: '警告',
                                message: res.data.message,
                                type: 'warning'
                            });
                        } else {
                            this.tableData = res.data.data;
                            this.AllData=res.data.data;
                        }

                    })
            },
            handleEdit(type, row) {
                this.action = type;
                this.formTitle = '添加';
                this.editVisible = true;
                switch (type) {
                    case 'add':
                        break;
                    case 'edit':
                        this.formTitle = '修改';
                        Object.assign(this.form, row)
                        // this.form = row;
                        break;
                    default:
                        break;
                }
            },
            onSubmit(formName) {

                var formUp = {};
                for (let p in this.form) {
                    if (this.form[p]) {
                        formUp[p] = this.form[p]
                    }
                }
                var url = 'AdminFunc_Add';
                switch (this.action) {
                    case 'add':
                        break;
                    case 'edit':
                        url = 'AdminFunc_Update';
                        break;
                    default:
                        return;
                        break;
                }
                this.$refs[formName].validate((valid) => {
                    // console.log(valid);
                    if (valid) {
                        Request(url, {
                                data: formUp
                            })
                            .then(res => {
                                let rt = res.data;

                                if (rt.code == 200) {
                                    this.$notify({
                                        title: this.formTitle + '成功',
                                        type: 'success'
                                    });
                                    if (this.action == 'add') {
                                        this.tableData.push(rt.data);
                                    } else {
                                        this.tableData.filter((e) => {
                                            if (e.id == this.form.id) {
                                                return Object.assign(e, this.form);
                                            }
                                        });
                                    }
                                    
                                    this.editVisible = false;
                                } else {
                                    this.$notify({
                                        title: '警告',
                                        message: '操作失败' + res.data.message,
                                        type: 'warning'
                                    });
                                }

                            })
                    } else {
                        // console.log('error submit!!');
                        return false;
                    }
                });

            },
            handleDelete(type, row, isTrue) {
                var type = type || 'del';
                var caozuo = {
                    del: {
                        title: '删除',
                        api: 'AdminFunc_Delete',
                    },
                    restore: {
                        title: '恢复',
                        api: 'AdminFunc_Restore',
                    }
                }
                if (!caozuo[type]) {
                    this.$alert('非法操作？', '错误提示', {
                        confirmButtonText: '确定',
                        type: 'warning',
                    });
                    return;
                }
                var CZ = caozuo[type];
                var length = 1;
                this.$confirm('此次操作您将会' + CZ.title + length + '条数据，是否真的要' + CZ.title + '？', '确认' + CZ.title, {
                        distinguishCancelAndClose: true,
                        type: 'warning',
                        confirmButtonText: '立即' + CZ.title,
                        cancelButtonText: '放弃'
                    })
                    .then(() => {
                        Request(CZ.api, {
                                data: {
                                    id: row.id,
                                    isTrue: isTrue
                                }
                            })
                            .then(res => {
                                let rt = res.data;
                                if (rt.code == 200) {
                                    this.$notify({
                                        title: CZ.title + '成功',
                                        type: 'success',
                                        message: res.data.message,
                                    });
                                    this.tableData = this.tableData.filter((d) => {
                                        if (d.id != row.id) {
                                            return d;
                                        }
                                    })
                                    // this.$message.success('删除成功');
                                } else {
                                    this.$notify({
                                        title: '警告',
                                        message: '操作失败' + res.data.message,
                                        type: 'warning'
                                    });
                                }

                            })
                    })

                this.delVisible = false;
            }
        }
    }
</script>

<style>
    .demo-table-expand {
        font-size:1em;
        width: 100%;
    }

    .demo-table-expand label {
        font-weight: 600;
        width: 190px;
        color: #99a9bf;
        
    }

    .demo-table-expand .el-form-item {
        font-size:2em ;
        border-bottom:  1px solid #c3c3c3;
        margin-right: 0;
        margin-bottom: 0;
        width: 70%;
    }
</style>
